<template>
    <div :class="['cover-wrap', roundClass]">
        <lazy-image class="cover-img" :src="url" :webp="enableWebp" alt="封面图片"></lazy-image>
        <slot></slot>
    </div>
</template>

<script>
import { computed } from 'vue'
import LazyImage from '@/components/LazyImage'
export default {
    name: 'CoverImage',
    components: {
        LazyImage
    },
    props: {
        // 图片地址
        src: {
            type: String,
            required: true
        },
        // 图片尺寸
        size: {
            type: String,
            default: '@480w_270h_1c'
        },
        // 是否圆角
        round: {
            type: Boolean,
            default: false
        },
        // 是否使用webp图片
        webp: {
            type: Boolean,
            default: true
        }
    },
    setup(props) {
        const roundClass = props.round ? 'cover-wrap-round' : ''
        const nopic = computed(() => props.src.indexOf('noface') > -1)
        const url = computed(() => {
            return nopic.value ? props.src : (props.src + props.size)
        })
        const enableWebp = computed(() => !nopic.value && props.webp)
        return {
            url,
            enableWebp,
            roundClass
        }
    }
}
</script>

<style lang="scss" scoped>
    .cover-wrap{
        position: relative;
        background: {
            image: url('~@/assets/images/placeholder.png');
            color: #f3f3f3;
            size: 36%;
            repeat: no-repeat;
            position: 50%;
        }
        overflow: hidden;
        padding-bottom: (270 / 480) * 100%;
        &-round {
            border-radius: 50%;
        }
        :deep .cover-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }    
</style>